<template>
  <div class="setting">
    <h2>公司设置</h2>
    <div class="tab">
      <el-tabs v-loading="loading">
        <el-tab-pane label="角色管理">
          <el-button type="primary" size="small" @click="dialogVisible = true">新增角色</el-button>
          <el-table border :data="roleInfo" style="margin-top: 20px">
            <el-table-column align="center" label="序号" width="120" type="index" />
            <el-table-column align="center" label="角色" width="240" prop="name" />
            <el-table-column align="center" label="描述" prop="description" />
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="success" @click="getRole(scope.row.id)">分配权限</el-button>
                <el-button size="small" type="primary" @click="editRole(scope.row.id)">编辑</el-button>
                <el-button size="small" type="danger" @click="delRole(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :total="pageInfo.pageTotal"
            @current-change="change"
          />
        </el-tab-pane>
        <el-tab-pane label="公司信息">
          <el-input
            prefix-icon="el-icon-warning"
            value="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
            class="infoHeader"
          />
          <el-form style="width: 40%;margin-top: 50px;margin-left: 30px;">
            <el-form-item label="公司名称" label-width="80px">
              <el-input v-model="companyInfo.name" :disabled="true" />
            </el-form-item>
            <el-form-item label="公司地址" label-width="80px">
              <el-input v-model="companyInfo.companyAddress" :disabled="true" autosize="" />
            </el-form-item>
            <el-form-item label="公司邮箱" label-width="80px">
              <el-input v-model="companyInfo.mailbox" :disabled="true" />
            </el-form-item>
            <el-form-item label="备注" label-width="80px">
              <el-input
                v-model="companyInfo.remarks"
                :disabled="true"
                type="textarea"
                :rows="2"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      title="编辑角色"
      :visible="dialogVisible"
      width="50%"
      @close="cancel"
    >
      <el-form ref="addForm" v-loading="loading" label-width="80px" :model="formData" :rules="formRule">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formData.name" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </el-row>
    </el-dialog>
    <el-dialog :visible.sync="assignDialog" title="分配权限">
      <el-tree
        ref="tree"
        show-checkbox
        :data="roles"
        :props="defaultProps"
        :default-expand-all="true"
        node-key="id"
        :default-checked-keys="checkedArr"
        :check-strictly="true"
      />
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="assignDialog=false">取消</el-button>
          <el-button size="small" type="primary" :loading="assignLoading" @click="updateRole">确定</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { getAllRoleList, delRole, addRole, editRole, getRoleDetail, assignRole } from '@/api/role'
import { getAllPermission } from '@/api/permission'
import { getCompanyInfo } from '@/api/company'
import { dataToTreeData } from '@/utils'
export default {
  name: 'Setting',
  data() {
    return {
      roleInfo: [],
      pageInfo: {
        page: 1,
        pagesize: 8,
        pageTotal: 0
      },
      companyInfo: {
        name: '', // 公司名称
        companyAddress: '', // 公司地址
        mailbox: '', // 公司邮箱
        remarks: ''// 备注
      },
      dialogVisible: false,
      formData: {
        name: '',
        description: ''
      },
      formRule: {
        'name': [{ required: true, triggle: 'blur', message: '角色名称不能为空' }]
      },
      loading: false, // 控制表单的加载
      loadingTab: false, // 控制列表的加载
      loadingTabale: false,
      defaultProps: {
        label: 'name'
      },
      assignDialog: false, // 控制分配权限会话框的显示与隐藏
      roles: [], // 所有权限列表
      checkedArr: [], // 当前id拥有的权限数组
      roleId: '', // 保存当前的id值
      assignLoading: false
    }
  },
  created() {
    this.getAllRoleList()
    this.getDetailInfo()
  },
  methods: {
    // 获取角色用户列表
    async getAllRoleList() {
      this.loading = true

      // this.loadingTabale = true
      const { total, rows } = await getAllRoleList(this.pageInfo)
      this.roleInfo = rows
      this.pageInfo.pageTotal = total
      this.loadingTabale = false
      this.loading = false
    },
    // 点击下一页或上一页的页码
    change(page) {
      // 修改页码
      this.pageInfo.page = page
      // 重新获取数据
      this.getAllRoleList()
    },
    // 获取公司详细信息
    async getDetailInfo() {
      this.companyInfo = await getCompanyInfo(this.$store.getters.companyId)
    },
    // 删除角色
    async delRole(id) {
      // this.loadingTab = true
      try {
        this.loading = true
        await this.$confirm('确定是否删除该角色？', {
          type: 'warning'
        })
        await delRole(id)
        this.$message.success('删除成功！')
        // 删除成功之后需要重新获取角色列表
        this.getAllRoleList()
      } catch (error) {
        console.log(error)
      } finally {
        // this.loadingTab = false
        this.loading = false
      }
    },
    // 新增角色
    async addRole() {
      this.loading = true
      // 打开会话框
      this.dialogVisible = true
      // 手动校验表单数据
      try {
        await this.$refs.addForm.validate()
        if (this.formData.id) {
          await editRole({ ...this.formData, companyId: this.$store.getters.companyId })
        } else {
          await addRole(this.formData)
        }
        // 获取最新的角色列表进行渲染
        this.getAllRoleList()
        let message = '添加角色成功'
        this.formData.id ? message = '修改角色成功' : message
        this.$message.success(message)
        // this.dialogVisible = false// 关闭会话框
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
        this.dialogVisible = false// 关闭会话框
      }
    },
    // 修改角色
    async editRole(id) {
      // 根据id获取角色信息
      this.formData = await getRoleDetail(id)
      this.dialogVisible = true
    },
    // dialog的close事件，点击取消
    cancel() {
      // 关闭会话框
      this.dialogVisible = false
      // 情况表单校验
      this.$refs.addForm.resetFields()
      // 重置数据
      this.formData = {
        name: '',
        description: ''
      }
    },
    // 点击分配权限，获取所有权限树
    async getRole(id) {
      // 获取所有权限
      this.roleId = id
      this.roles = dataToTreeData(await getAllPermission(), '0')
      const { permIds } = await getRoleDetail(id)
      this.checkedArr = permIds
      this.assignDialog = true
    },
    // 更新权限点
    async updateRole() {
      this.assignLoading = true
      await assignRole({
        id: this.roleId,
        permIds: this.$refs.tree.getCheckedKeys()
      })
      this.assignLoading = false
      this.$message.success('分配权限成功')
      this.assignDialog = false
    }
  }
}
</script>

<style scoped lang="scss">
.el-pagination{
  text-align: right;
  margin-top: 10px;
}
::v-deep .infoHeader {
  input{
  background-color: #f4f4f5;
  }
}
</style>
